<template>
	<view class="login">
		<view class="login-bg">
			<!-- <image src="../../static/images/logo-bg.png" mode=""></image> -->
		</view>
		<form class="login-form" v-model="inputName">
			<view class="login-section">
				<image style="width: 26upx; height: 38upx;" src="../../static/images/mobile.png" mode="widthFix"></image>
				<input type="text" name="mobile" placeholder="请输入账号" hover-stay-time="70" @input="mobileInput">
			</view>
			<view class="login-section">
				<image style="width: 30upx; height: 42upx;" src="../../static/images/operat-icon2.png" mode="widthFix"></image>
				<input type="text" name="mobile" placeholder="请输入密码" hover-stay-time="70" @input="mobileInput">
			</view>
			<button class="login-btn" hover-class="click" hover-stay-time="70" @click="submitLogin">登入</button>
		</form>
		<!-- <image class="background_img" src="../../static/images/logo-bg.png"></image> -->
		<view class="textData">
			<text v-for="(item,index) in appData" :key='index' >
				{{item.title}}
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputName:{
					appData:[]
				}
			}
		},
		methods: {
			submitLogin(){
				uni.request({
				    url: 'https://unidemo.dcloud.net.cn/api/news', //仅为示例，并非真实接口地址。
				    success: (res) => {
						console.log(res)
				    }
				});
			}
		}
	}
</script>

<style>
	page {
		height: 100vh;
	}
	.login{
		height:100vh;
		position:relative;
	}
	.login-bg{
		position:absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		z-index: -1;
		font-size: 0;
	}
	.login-bg image{
		width:100%;
		height:100%;
	}
	.login-form{
		display: block;
		position: absolute;
		width:100%;
		top:200upx;
	}
	.login .login-section{
		display:flex;
		width:600upx;
		margin:0 auto;
		margin-top:20upx;
		height:140upx;
		align-items: center;
	}
	.login .login-section image{
		width:48upx;
		margin-right: 20upx;
	}
	.login .login-section input{
		border-bottom: 1px solid #f1f1f1;
		height:50upx;
		line-height: 50upx;
		padding: 15upx 0;
		font-size:28upx;
	}
	/* input[name="mobile"]{
		width:520upx;
	}
	input[name="vertify"]{
		width:280upx;
	} */
	/* .login-count-back{
		width:820upx;
		background:#62B4FE;
		height:80upx;
		line-height:80upx;
		text-align:center;
		font-size:26upx;
		border-radius: 10upx;
		color:#FFFFFF;
	} */
	.login-count-back.disabled{
		background:#CACACA;
	}
	.login-btn{
		height:100upx;
		line-height: 100upx;
		width:550upx;
		background:#62B4FE;
		color:#FFFFFF;
		font-size:34upx;
		margin-top:200upx;
	}
	.click{
		opacity: 0.7;
	}
	.background_img {
		width: 100%;
		height: 261upx;
	}
</style>
